<template>
    <div class="shangpu">
        <div class="shangpu-wrap">
            <div class="shangpuhead clearfix">
                <h1 class="fl tianmaologo">
                    <a href="">
                        <img src="../assets/img/ys/shangpulogo.png" alt="">
                    </a>
                </h1>
                <div class="fl spinfo">
                    <ul class="shangpu-ul">
                        <li class="slogo">
                            <a href="">{{narr.spname}}</a>
                            <div class="slogo-extra">
                                <span class="slogo-one">
                                    <span>品牌直销</span>    
                                </span>
                                <span class="slogo-two">
                                    <a href="">

                                    </a>
                                </span>
                            </div>
                            <div class="dianpuinfo-wrap">
                                <div class="dianpuinfo">
                                    <div class="dianpuhead">
                                        <h2>店铺服务</h2>
                                        <ul class="clearfix zhanggui">
                                            <li class="clearfix">
                                                <label>掌　　柜：</label>
                                                <div class="spright">
                                                    <a href="" class="spid">{{narr.spname}}</a>
                                                </div>
                                            </li>
                                            <li class="clearfix">
                                                <label>客　　服：</label>
                                                <div class="spright">
                                                    <span>
                                                        <a href="" class="kefu"></a>
                                                    </span>
                                                </div>
                                            </li>
                                            <li class="clearfix">
                                                <label>开店时长：</label>
                                                <div class="spright dpage">
                                                    <span class="dpage-age">7</span><span class="dpage-content">天猫7年店</span>
                                                </div>
                                            </li>
                                            <li class="clearfix">
                                                <label>所 在 地：</label>
                                                <div class="spright">上海</div>
                                            </li>
                                            <li class="clearfix">
                                                <label>工商执照：</label>
                                                <div class="spright">
                                                    <a href="" class="zhizhao"></a>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                    <div class="dianpusc">
                                        <span class="fl dpliulan">
                                            <i></i>
                                            <span>进店逛逛</span>
                                        </span>
                                        <span class="fr dpsc" v-if="sc">
                                            <i></i>
                                            <span @click="scs">收藏本店</span>
                                        </span>
                                        <span class="fr dpsc" v-else>
                                            <i></i>
                                            <span @click="scs">已收藏</span>
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="wlinfo">
                            <div class="wlinfo-wrap">
                                <div class="spitem">
                                <div class="shopdr"> 描 述 </div>
                                <div class="shop-score">
                                    <span>4.9</span>
                                    <s class="score-up"></s>
                                </div>
                                </div>
                                <div class="spitem">
                                    <div class="shopdr"> 服 务 </div>
                                    <div class="shop-score">
                                        <span>4.9</span>
                                        <s class="score-up"></s>
                                    </div>
                                </div>
                                <div class="spitem">
                                    <div class="shopdr"> 物 流 </div>
                                    <div class="shop-score">
                                        <span>4.9</span>
                                        <s class="score-up"></s>
                                    </div>
                                </div>
                            </div>
                            
                        </li>
                        
                        <a href="" class="slogo-tran">
                                
                        </a>
                    </ul>
                </div>
                <div class="shopwt">
                            <div class="shop-dec">
                                <div class="dec-title">手机逛</div>
                                <i class="shopwt-qr"></i>
                            </div>
                            <a href="" class="slogo-tran newleft">
                                
                        </a>
                        <div class="hic">
                            <img src="../assets/img/ys/5.png" alt="">
                            <p>扫一扫，手机逛起来</p>
                        </div>
                </div>
                <div class="fr">
                    <div class="search-wrap">
                        <form action="" class="soutianmao1">
                            <input type="text" class="sp-search" name="search" autocomplete="off" placeholder="搜索 天猫 商品/品牌/店铺">
                            <button type="button" class="soutianmao">搜天猫</button>
                            <button type="button" class="soubendian">搜本店</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-wrap">
            <div class="navimg-wrap">
                <div></div>
            </div>
            <div class="biaoqian-wrap">
                <ul class="biaoqian clearfix">
                    <li><router-link :to="'/shangpu/'+id" @click="shouye">首页</router-link></li>
                    <li v-for="(item,key) in arr" :key="key" @click="chuans(item)"><a href="javascript:;">{{item}}</a></li>
                </ul>
            </div>
        </div>
        <router-view :msg="b" :mdp="dp" :zy="zy"></router-view>
        
        <!-- <div class="shangpinlist-wrap clearfix">
            <div class="navlist fl">
                <div class="bdsousuo-wrap wraps">
                    <div class="bdsousuo">
                        <h3 class="titles">本站搜索</h3>
                        <div class="jgsousuo-wrap clearfix">
                            <form action="">
                               <ul>
                                   <li class="keyword-wrap clearfix">
                                       <span class="key fl">关键字</span> <input type="text" name="keyword" class="keyword fl" autocomplete="off">
                                   </li>
                                   <li class="price-wrap clearfix">
                                       <span class="key fl">价格</span>
                                       <input type="text" class="pri fl" id="price1">
                                       <span class="fl lianjies">-</span>
                                       <input type="text" class="pri fl" id="price2">
                                   </li>
                                  
                               </ul>
                                <div class="pri-submit">
                                       <button class="pri-btn" type="button"></button>
                                   </div>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="fenlei-wrap wraps">
                    <div class="fenlei">
                        <h3 class="titles">宝贝分类</h3>
                        <div class="fenleilist">
                            <div class="chakansuoyou">
                                <a href="">查看所有宝贝</a>
                            </div>
                            <ul class="fenleinav clearfix">
                                <li><a href="">按综合</a></li>
                                <li><a href="">按销量</a></li>
                                <li><a href="">按新品</a></li>
                                <li><a href="">按价格</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="paihang-wrap wraps">
                    <div class="paihang">
                        <h3 class="titles">宝贝排行榜</h3>
                        <div class="paihanglist">
                            <ul class="pl-ul clearfix">
                                <li class="active">销售量
                                    
                                </li>
                                <li>收藏数</li>
                            </ul>
                            <div class="ph-wrap">
                                <div class="xiaow clearfix">
                                    <div class="xw-l fl">
                                        <img src="../assets/img/ys/zhizhao.png" class="spimg" alt="">
                                    </div>
                                    <div class="xw-r fr">
                                        <p class="dec"><a href="" class="spname">sdadsdsdsdsdsadsds</a></p>
                                        <p class="shprice">
                                            <span class="rmb">￥</span>
                                            <span class="danjia">433.9</span>
                                        </p>
                                        <p class="sale">已收藏<span class="scshu">123456</span>笔</p>
                                    </div>
                                </div>       
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="shangpinlist fr clearfix">
                <div class="tjhead clearfix">
                    <div class="tjnav-wrap">
                        <div class="tjnavw">
                            <div class="tjnav">
                                <ul class="tjnav-ul clearfix">
                                    <li class="suoyoufenlei"><a href="" class="syfl">所有分类</a><i class="syii">></i></li>
                                    <li class="suoyoushangpin">
                                        <div class="suoyoushangpin-wrap fl">
                                            <a href="" class="sysp">所有商品<i></i></a>
                                            <div class="suoyousplist-wrap">
                                                <ul class="syspulwrap">
                                                    <li><a href="" class="daoyhanglist">男装</a></li>
                                                    <li><a href="" class="daoyhanglist">女装</a></li>
                                                </ul>
                                                <ul class="syspulwrap">
                                                    <li><a href="" class="daoyhanglist">裤子</a></li>
                                                    <li><a href="" class="daoyhanglist">衣服</a></li>
                                                    <li><a href="" class="daoyhanglist">鞋子</a></li>
                                                </ul>
                                                <ul class="syspulwrap">
                                                    <li><a href="" class="daoyhanglist">裤子</a></li>
                                                    <li><a href="" class="daoyhanglist">衣服</a></li>
                                                    <li><a href="" class="daoyhanglist">鞋子</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                        <i class="syii">></i>
                                    </li>
                                    <li>
                                        <form action="">
                                            <div class="tjsearch-wrap"><input type="text" class="tjsearch" placeholder="在当前结果中搜索"><i class="tjsearch-btn"></i></div>
                                        </form>
                                    </li>
                                    <li class="tjresou">
                                        <span>本店热搜词：</span>
                                        <a href="">70</a>
                                        <a href="">开口笑</a>
                                        <a href="">匡威</a>
                                        <a href="">高帮</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="lingwainav-wrap">
                            <div class="lingwainav">
                                <span class="zonglan">总览：</span>
                                <a href="" class="zonglan-a">男装</a>
                                <a href="" class="zonglan-a">女装</a>
                                <a href="" class="zonglan-a">中性</a>
                            </div>
                            <div class="pingpai">
                                <span class="pinpais">品牌：</span>
                                <a href="" class="pinpai-a">耐克</a>
                                <a href="" class="pinpai-a">阿迪达斯</a>
                            </div>
                             <div class="shangpuinfos-wrap clearfix">
                                 <div class="fl"><span class="dianpuxinxis">店铺信息：</span></div>
                                 <div class="fl xingxiss"><span class="shangpuinfos">
                                        诞生于1908年，拥有悠久百年历史的传奇美国原创运动品牌，在音乐、体育、艺术和潮流历史上无可替代的地位，都在诉说其永恒不变的原创力!
                                     </span></div>
                             </div>
                    </div>
                    </div>
                    
                </div>
                <div class="zonghenav-wrap clearfix">
                    <div class="zonghe fl">
                        <a href="" class="zonghepaixu zonghe-a">综合排序</a>
                        <a href="" class="xiaoliang zonghe-a">销量<i class="xiaoliang-is xiaoliang-i"></i></a>
                        <a href="" class="xinpings zonghe-a">新品<i class="xiaoliang-is xinping-i"></i></a>
                        <a href="" class="shoucangs zonghe-a">收藏<i class="xiaoliang-is shoucang-i"></i></a>
                        <a href="" class="jiages zonghe-a">价格<i class="price-up"></i><i class="price-down"></i></a>
                    </div>
                    <div class="price-chaxun">
                        <form action="">
                            <div class="pinput-wrap">
                                <b class="fb-item">
                                    <i class="pricei">￥</i>
                                    <input type="text" class="jginput" name="lowprice" maxlength="8" autocomplete="off">
                                </b>
                                <i class="jiange"></i>
                                <b class="fb-item">
                                    <i class="pricei">￥</i>
                                    <input type="text" class="jginput" name="highprice" maxlength="8" autocomplete="off">
                                </b>
                            </div>
                            <div class="qkqr">
                                <a href="" class="cbtn">清空</a>
                                <a href="" class="qrbtn">确定</a>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="spitems">
                    <router-view></router-view>
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:"",
            arr:"",
            narr:"",
            b:"",
            dp:"",
            sc:true,
            zy:0
        }
    },
    methods:{
        shouye(){
            this.zy++
        },
        scs(){
            console.log(this.sc)
            if(this.sc){
                console.log(2)
                axios.post("/api/scdp",{id:this.id}).then((data)=>{
                    console.log(data.data)
                    if(data.data){

                        this.sc=false
                        console.log(this.sc)
                    }
                })
            }else{
                console.log(this.id)
                axios.post("/api/shanchudp",{id:this.id}).then((data)=>{
                    if(data.data){
                        this.sc=true
                        console.log(this.sc)
                    }
                })
            }
        },
        chuans(val){
            // sessionStorage.setItem('b',val )
            // this.$router.push({name:"soutag",params:{tag:val}})
            this.b=val
            this.dp=val
        }
    },
    created(){
        axios.get("/api/").then((data)=>{
           if(!data.data){
               this.$router.push("/login")
           }
        })
       this.id=this.$route.params.id
       axios.post("/api/chasc",{id:this.id}).then((data)=>{
            if(data.data){
                this.sc=false
            }else{
                this.sc=true
            }
       })
        axios.post("/api/spdh",{id:this.id}).then((data)=>{
            if(data.data){
                this.arr=data.data[0].navname.split(',')
                this.narr=data.data[0]
            }else{
                 this.$toast({
                        message:"数据异常一秒后重新刷新页面，或者手动刷新",
                        duration:2000
                    })
                    window.location.href="/"
            }
        })
        console.log(this.sc)
    }
}
</script>

<style scoped>
*{
       box-sizing: content-box;
   }
.zhanggui{
    font-size: 14px;
    padding-left: 0;
}
.clearfix::before{
    content: '';
    display: block;
    clear: both;
}
.wraps{
    margin-bottom: 15px;
}
.shopwt:hover .hic{
    display: block;
}
.hic p{
    margin-top: 0;
    width: 160px;
    text-align: center;
    color: #9E958C;
}
.hic img{
    margin: 10px 10px 0;
    width: 140px;
}
.hic{
    position: absolute;
    left: -1px;
    top: 51px;
    z-index: 9999;
    height: 178px;
    width: 160px;
    overflow: hidden;
    border: 1px solid #e4e4e4;
    background: #fff;
    display: none;
}
.slogo:hover .dianpuinfo-wrap{
    display: block;
}
.dpsc span{
    margin-left: 20px;
    margin-right: 20px;
    font-weight: 400;
    line-height: 26px;
}
.dpsc i{
     width: 16px;
    height: 16px;
    position: absolute;
    top: 3px;
    left: 16px;
    background: 0 0;
    font-style: normal;
    background: url("../assets/img/ys/4.png")
}
.dpsc{
    cursor: pointer;
    color: #fff;
    float: right;
    margin: 0 10px 0 0;
    vertical-align: top;
    height: 28px;
    border: 1px solid #ff0036;
    padding: 0 0 0 17px;
    background-color: #ff0036;
    position: relative;
}
.dpliulan span{
    margin-left: 20px;
    margin-right: 20px;
    font-weight: 400;
}
.dpliulan i{
    width: 16px;
    height: 16px;
    position: absolute;
    top: 6px;
    left: 16px;
    background: 0 0;
    font-style: normal;
    background: url("../assets/img/ys/3.png")
}
.dpliulan{
    cursor: pointer;
    float: left;
    vertical-align: top;
    height: 28px;
    border: 1px solid #e5e5e5;
    padding: 0 0 0 17px;
    color: #404040;
    position: relative;
    background-color: #f2f2f2;
    line-height: 26px;
    text-align: center;
}
.dianpusc{
    font-size: 14px;
    margin: 10px 0;
    overflow: hidden;
}
.zhizhao{
    display: inline-block;
    width: 20px;
    height: 22px;
    background: url("../assets/img/ys/zhizhao.png")
}
.dpage-content{
    color: #f04343;
    padding: 0 1px;
    line-height: 0!important;
    overflow: hidden;
}
.dpage-age{
    font-family: Impact,Arial;
    color: #ffd800;
    background-color: #f04343;
    padding: 0 3px;
    line-height: 0!important;
}
.dpage{
    border: 1px solid #f04343;
    width:90px;
    line-height: 14px;
    font-size: 13px;
    margin-top: 4px;
}
.kefu{
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 19px;
     background-image: url("../assets/img/ys/two.png");
    background-position: -2px;
}
.spid:hover{
    text-decoration: underline;
}
.spright .spid{
    color: #999;
}
.soutianmao1{
    position: relative;
    width: 480px;
}
.spright{
    margin-left: 75px;
    color: #999;
}
.dianpuhead li label{
    float: left;
    color: #959595;
}
.dianpuhead li{
    line-height: 22px;
    width: 100%;
}
.dianpuhead h2{
    font-weight: 400;
    height: 18px;
    margin: 5px 0 10px;
    color: #959595;
    font-size: 14px;
}
.dianpuhead{
    border-bottom: 1px dotted #DBDBDB;
    margin-top: 13px;
    padding: 8px 0;
    color: #959595;
}
.dianpuinfo{
    padding: 0 11px;
}
.dianpuinfo-wrap{
    position: absolute;

    top:51px;
    left: 0;
    width: 285px;
    z-index: 100;
    background-color: #fff;
    border: 1px solid #e5e5e5;
    display: none;
}
.biaoqian li a{
    font-size: 16px;
    line-height: 40px;
    color: #fff;
}
.biaoqian li{
    float: left;
    margin-right: 20px;
    height: 40px;
    text-align: center;
    min-width: 100px;
    border-right: 1px solid #fff;
}
.biaoqian-wrap{
    width: 1000px;
    margin: 0 auto;
    min-height: 40px;
}
.biaoqian{
   margin-top: 10px;
    min-width: 300px;
    display: block;
    /* margin-left: 190px; */
   background: rgba(0,0,0,0.3);
   border-radius: 5px;
   margin-bottom: 5px;
   margin-left: auto;
   margin-right: auto;
}
.navimg-wrap{
    width: 100%;
    height: 41px;
    overflow: hidden;
    position: relative;
    background: #FC0F3D;
}
.navimg-wrap div{
    width:1086px ;
    height: 43px;
    background: url("../assets/img/ys/zhen5.png") no-repeat;
    background-size: 100% 102%;
    background-position-y: -2px;
    margin: 0 auto;
}
.list-wrap{
    width: 100%;
}
.soutianmao{
    cursor: pointer;
    position: absolute;
    border: none;
    right:100px;
    width: 80px;
    height: 36px;
    background-color: #ff0036;
    color: #fff;
    float: left;
}
.soubendian{
    cursor: pointer;
    border: none;
    left: auto;
    background: #333;
    width: 80px;
    height: 38px;
    color: #fff;
    margin-left: 5px;
}
.sp-search{
     width: 367px!important;
    padding: 5px 3px 5px 5px;
    color: #000;
    height: 20px;
    border: #ff0036 solid 4px;   
    display: inline-block;
    float: left;
    outline: none;
}
.search-wrap{
    width: 540px;
    padding: 15px 0 0;
}
.shopwt .newleft{
    left: 23px;
    background-position: 0 20%;
}
    .shopwt-qr{
        position: absolute;
        top:3px;
        left: 55px;
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
        background: url("../assets/img/ys/ma.png") no-repeat;
    }
    .shopwt{
        float: left;
        width: 60px;
        border-left: 1px solid #f0f0f0;
        padding: 0 10px;
        margin: 30px 0 0;
        position: relative;
    }
    .shop-dec{
        float: left;
        width: 45px;
    }
    .dec-title{
        text-align: center;
        color: #999;
        font-weight: 400;
        font-size: 12px;
    }
    .shangpu-wrap{
        width: 100%;
        height: 85px;
    }
    .shangpuhead{
        width: 1230px;
        margin: 0 auto;
    }
    .tianmaologo{
        width: 162px;
        height: 64px;
        margin-top: 10px;
    }
    .shangpu-ul li{
        cursor: pointer;
        float: left;
        border-left:1px solid #f0f0f0;
    }
    .spinfo{
        position: relative;
        padding: 15px 0 0;
        height: 50px;
    }
    .slogo{
        padding: 0 10px;
        height: 38px;
        position: relative;
        z-index: 300;
    }
    .slogo>a{
            height: 22px;
            line-height: 19px;
            overflow: hidden;
            background-color: #fff;
            font-size: 12px;
            font-family: "\5b8b\4f53";
            color: #333;
            font-weight: 700;
    }
    .slogo-extra{
        height: 25px;
        width: 80px;
    }
    .slogo-one{
        display: inline-block;
        vertical-align: top;
        padding: 0;
        height: 14px;
        line-height: 14px;
        font-weight: 700;
        background-color: #f4c985;
        border: 1px solid #e7ba77;
        border-radius: 2px;
        color: #856651;
        text-align: center;
        
    }
    .slogo-one span{
        display: inline-block;
        font-size: 10px;
    }
    .slogo-two{
        overflow: hidden;
    }
    .slogo-two a{
        display: inline-block;
        width: 20px;
        height: 20px;
        line-height: 19px;
        background-image: url("../assets/img/ys/two.png");
        background-position: -2px;
    }
    .wlinfo{
        font-size: 12px;
        width: 132px;
        height: 38px;
        font-weight: 400;
        padding: 0 10px;
    }
    .wlinfo-wrap{
        overflow: hidden;
        position: relative;
    }
    .spitem{
        float: left;
        color: #999;
        width: 40px;
        height: 36px;
        position: relative;
    }
    .shopdr{
        text-align: center;
        font-family: "\5b8b\4f53";
    }
    .shop-score{
        color: #ff0036;
        padding-left: 5px;
        height: 18px;
        width: 31px;
        position: relative;
        overflow: hidden;
    }
    .score-up{
        color: #ff0036;
        width: 8px;
        top: 5px;
        position: absolute;
    }
    .score-up::before{
        content: "↑";
        font-size: 14px;
        position: absolute;
        left: 4px;
        top: -6px;
    }
    .slogo-tran{
        float: left;
        display: block;
        margin: 0 0 0 8px;
        width: 12px;
        height: 38px;
        position: relative;
        background: url("../assets/img/ys/dian.png") no-repeat;
        background-position: 0 30%;
    }
    .titles{
        height: 40px;
        line-height: 40px;
        padding: 0 10px;
        color: #fff;
        background: #000;
        font-size: 18px;
    }

    /* shangpuzhuye */
   
    
    /* shangpuinfo */
    
</style>
